/**
 * Created by YJH on 2018/5/29.
 */
import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    Image,
} from 'react-native';
import HTMLView from 'react-native-htmlview';


/** 主页面listview列表的item */
export default class RespositoryTrendingCell extends Component {
    constructor(props) {
        super(props);

        this.state = {
            favorite: this.props.projectModule.isFavorite,
            favoriteIcon: this.props.projectModule.isFavorite ? require('../../res/images/ic_up_pressed.png')
                : require('../../res/images/ic_up.png'),
            theme:this.props.hTheme,


        }
    }

    setFavoreteState(isFavorite) {
        this.setState({
            favorite: isFavorite,
            favoriteIcon: isFavorite ? require('../../res/images/ic_up_pressed.png')
                : require('../../res/images/ic_up.png'),
        })
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.hTheme !== this.props.theme) {
            this.setState({
                theme: nextProps.hTheme
            })
        }
        this.setFavoreteState(nextProps.projectModule.isFavorite);
    }

    /** 点击搜藏*/
    onFavorite() {
        this.setFavoreteState(!this.state.favorite);
        this.props.onFavoritePressed(this.props.projectModule.item, !this.state.favorite);
    }


    render() {
        let data = this.props.projectModule.item ? this.props.projectModule.item : this.props.projectModule;
        let des = '<p>' + data.description + '<p>';

        let FavoriteButton = <TouchableOpacity onPress={() => {
            this.onFavorite()
        }}>
            <View style={styles.item_star}>
                <Image style={[{width: 20, height: 20}, {tintColor: this.state.theme.themeColor}]} source={this.state.favoriteIcon}/>
                <Text style={styles.item_star_num}>
                    {data.meta}
                </Text>
            </View>
        </TouchableOpacity>;

        return <TouchableOpacity style={styles.touchable} onPress={this.props.goItemDetail}>
            <View style={styles.item_cell}>
                <Text style={styles.item_owner}>
                    {data.fullName}
                </Text>

                {FavoriteButton}
                <HTMLView
                    value={des}
                    stylesheet={{
                        p: styles.item_des,
                        a: styles.item_des,
                    }}
                />
                {/*<Text style={styles.item_des}>*/}
                {/*{this.props.data.description}*/}
                {/*</Text>*/}

                <View style={styles.item_avatar}>
                    <Text style={styles.item_owner}>
                        贡献者：
                    </Text>
                    {data.contributors.map((result, i, arr) => {
                        return <Image key={i} source={{width: 23, height: 23, uri: arr[i]}}/>;
                    })}

                </View>

            </View>
        </TouchableOpacity>
    }
}
const styles = StyleSheet.create({
    touchable: {
        flex: 1,
    },
    item_cell: {
        padding: 10,
        backgroundColor: '#ffffff',
        borderWidth: 3,
        borderColor: '#F0F0F0',
        borderRadius: 5,
        elevation: 2,

    },
    item_avatar: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    item_star: {
        flexDirection: 'row',
        justifyContent: 'flex-end',
        alignItems: 'center',
    },
    item_star_num: {
        color: 'orange',
        fontSize: 14,
    },
    item_owner: {
        color: 'black',
        fontSize: 16,
    },
    item_des: {
        color: 'gray',
        fontSize: 14,
    },

});